<template>
    <div>
             <!-- 搜索栏 -->
      <el-card id="serach">
        <el-row>
          <el-col :span="20">
            <el-input
              placeholder="用户名"
              clearable
            ></el-input>
            <el-button
              type="success"
              plain
              icon="el-icon-search"
              @click="getUserList"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="users" stripe style="width: 100%">
        <el-table-column label="#" width="30">

          </el-table-column>
        <el-table-column prop="id" label="用户" width="280">
          <template slot-scope="{row}">
            <div>{{ row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="remaining" label="额度" >
          <template slot-scope="{row}">
            <el-progress  :color="customColors" :percentage="row.remaining / row.total * 100"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="{$index}">
            <el-button plain type="warning" icon="el-icon-remove-outline"  @click="decrease($index)">减少额度</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="{$index}">
            <el-button plain type="success" icon="el-icon-circle-plus-outline"  @click="increase($index)">增加额度</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        users: [
          {
            id: 1,
            name: "张三",
            total: 1000,
            remaining: 100,
          },
          {
            id: 2,
            name: "李四",
            total: 1000,
            remaining: 200,
          },
          {
            id: 3,
            name: "王五",
            total: 1000,
            remaining: 1000,
          },
        ],
        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#6f7ad3', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#5cb87a', percentage: 100}
        ]
      };
    },
  methods: {
    increase(index) {
      const user = this.users[index];
      if (user.remaining < user.total) {
        user.remaining += 100;
      }
    },
    decrease(index) {
      const user = this.users[index];
      if (user.remaining >= 100) {
        user.remaining -= 100;
      }
    },
  },
};
</script>